<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>一品</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            width: 100%;
            height: 100%;
        }
        body {
            width: 100%;
            height: 100%;
            background: url("https://img.ionepin.com/b57616b7c6bad7188fa80580f67dd6ea520895f3.png") no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .android {
            font-size: 16px;
            font-weight: bold;
            color: #7272A1;
            background: #ffffff;
            margin-right: 8px;
        }

        .btn {
            flex: 1;
            height: 45px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
            font-size: 16px;
        }

        .ios {
            font-weight: bold;
            color: #FFFFFF;
            background: rgba(255, 255, 255, 0.2);
            margin-left: 8px;
        }
        .btn-group {
            display: flex;
            justify-content: space-between;
        }
        .bottom {
            position: absolute;
            bottom: 35px;
            left: 0;
            right: 0;
            padding: 0 20px;
        }
        .icon-android {
            background: url("https://img.ionepin.com/eb7ee83039f0991216cb12c02349bf9cf825237e.png") no-repeat;
            background-size: 100% 100%;
            width: 19px;
            height: 19px;
            margin-right: 4px;
        }
        .icon-ios {
            background: url("https://img.ionepin.com/eb331c39d502a336687bd77320b9e74dfca4e7dc.png") no-repeat;
            background-size: 100% 100%;
            width: 19px;
            height: 19px;
            margin-right: 4px;
        }
        .btn-home {
            width: 100%;
            height: 44px;
            background: rgba(255, 255, 255, 0);
            font-size: 16px;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
            border-radius: 4px;
            border: 1px solid #FFFFFF;
            margin-bottom: 25px;
            font-weight: bold;
            color: #FFFFFF;
        }
        .qrcode {
            width: 125px;
            height: 125px;
            margin: 0 auto 70px auto;
            background: #FFFFFF;
            border-radius: 4px;
            border: 2px solid #D6D2EE;
            padding: 5px;
        }
    </style>
    <script src="./jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            var api = 'https://shop-api.ionepin.com'
            if (document.domain != 'shop.ionepin.com') {
                api = 'https://shop-api-dev.ionepin.com'
            }
            //document.location.origin
            var data = {"fieldCode": ["androidDownload", "iosDownload", "customerQRcode"]}
            var androidUrl = null
            var iosUrl = null
            $.ajax({
                type : "POST",
                url:  api +　"/api/sysConfigs",
                method: "post",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(data),
                success: function (res) {
                    var info = res.data
                    if (!info.androidDownload) {
                        $("#android .text").text("敬请期待")
                    }
                    if (!info.iosDownload) {
                        $("#ios .text").text("敬请期待")
                    }
                    $("#img").attr("src",info.customerQRcode)
                    androidUrl = info.androidDownload
                    iosUrl = info.iosDownload
                }
            })
            $("#android").click(function () {
                if (isWeChat()) {
                    alert("请在浏览器中打开")
                    return
                }
                if (androidUrl) {
                    window.location.href=androidUrl
                } else {
                    alert('敬请期待')
                }
                //alert('更新中, 请等待开放')
            })
            $("#ios").click(function () {
                if (isWeChat()) {
                    alert("请在浏览器中打开")
                    return
                }
                if (iosUrl) {
                    window.location.href=iosUrl
                } else {
                    alert('敬请期待')
                }
                //window.location.href="https://testflight.apple.com/join/BNr99AYW"
            })
            $("#index").click(function () {
                window.location.href="/"
            })
        })
        function isWeChat() {
            let ua = window.navigator.userAgent.toLowerCase();
            return ua.match(/MicroMessenger/i) == "micromessenger"; // 判定为true则是微信浏览器，false则不是
        }
    </script>
</head>
<body>
<div class="bottom">
    <div class="qrcode">
        <img id="img" src="" width="100%" height="100%" />
    </div>
    <div class="btn-home" id="index">进入首页</div>
    <div class="btn-group">
        <div class="btn android" id="android" >
            <div class="icon-android"></div>
            <div class="text">Android下载</div>
        </div>
        <div class="btn ios" id="ios">
            <div class="icon-ios"></div>
            <div class="text">IOS下载</div>
        </div>
    </div>
</div>
</body>
</html>
